<!-- 权限分配 -->
<template>
    <div class="permission">
        <el-card>
            <el-button type="primary" icon="UserFilled" @click="addAdminRole">新增角色</el-button>
            <div class="table">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" max-height="460px">
                    <el-table-column label="序号" type="index" width="100px" align="center">
                    </el-table-column>
                    <el-table-column prop="roleName" label="角色名称" width="260px" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="roleCode" label="角色编码" width="260px" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="remark" label="角色描述" width="300px" show-overflow-tooltip> </el-table-column>
                    <el-table-column label="操作" align="center" width="300px">
                        <template #default="scope">
                            <el-button size="small" type="success" @click="handle(scope.row)" icon="Grid">权限分配</el-button>
                            <el-button size="small" type="primary" @click="handleEdit(scope.row)" icon="Edit">编辑</el-button>

                            <el-popconfirm title="您确定删除该角色吗?" @confirm="handleDelete(scope.row)" icon="Delete"
                                icon-color="red" width="220px">
                                <template #reference>
                                    <el-button size="small" type="danger" icon="Delete">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <AddRoleDialog @editRole="editRole" @addRole="addRole"></AddRoleDialog>
        <PermissionDialog></PermissionDialog>
    </div>
</template>


<script setup lang="ts">
import AddRoleDialog from './dialog/index.vue'
import PermissionDialog from './per_dialog/index.vue'
import { onMounted, ref } from 'vue';
import { reqAddAdminRoleInfo, reqDeleteRole, reqEditAdminRoleInfo, reqGetAdminRoleList } from '../../api/user';
import { AdminRole, AllAdminRole, GetAdminRoleResponseData } from '../../api/user/type';
import $bus from '../../bus';
import { ElMessage } from 'element-plus';

// 表格数据
let tableData = ref<AllAdminRole>([])
// 存储接口返回的分页器数据
onMounted(() => {
    getRoleList()

})
//获取全部 角色列表 信息
const getRoleList = async () => {
    let result: GetAdminRoleResponseData = await reqGetAdminRoleList()
    if (result.code == 20000) {
        tableData.value = result.data
    }

}
// 角色新增
const addAdminRole = () => {
    $bus.emit('showDialog', {
        isShow: true
    })
}
// 分配权下
const handle = (row: AdminRole) => {
    $bus.emit('Dialog', {
        isShow: true,
        id: row.id
    })

}
// 编辑角色信息
const handleEdit = (row: any) => {
    $bus.emit('showDialog', {
        isShow: true,
        row
    })

}
// 删除角色
const handleDelete = async (row: AdminRole) => {
    let result: any = await reqDeleteRole((row.id as number))
    if (result.code == 20000) {
        getRoleList()
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败'
        })
    }
}
//
// 编辑角色
const editRole = async (data: AdminRole) => {
    let result: any = await reqEditAdminRoleInfo(data)
    if (result.code == 20000) {
        getRoleList()
        ElMessage({
            type: 'success',
            message: '编辑成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '编辑失败'
        })
    }
}
//  新增角色
const addRole = async (data: AdminRole) => {
    let result: any = await reqAddAdminRoleInfo(data)
    if (result.code == 20000) {
        getRoleList()
        ElMessage({
            type: 'success',
            message: '新增成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '新增失败'
        })
    }
}


</script>

<style lang="scss" scoped>
.permission {
    .el-form {
        padding: 20px 30px;
    }

    .table {
        margin: 10px 0;
        margin-top: 20px;

        .el-table {
            font-size: 13px !important;
        }
    }

    .pagination {
        margin-top: 20px;

    }
}
</style>